<template>
    <div class="control-button">
        <blue-button :type="value ? 'pause' : 'play'" @click="control" />
        <blue-button type="refresh" @click="refresh" />
    </div>
</template>
<script>
export default {
    props: ['value'],
    name: "ControlButton",
    methods: {
        control() {
            this.value ? this.$emit('change', 'pause') : this.$emit('change', 'play')
            this.$emit('input', !this.value)
        },
        refresh() {
            this.$emit('input', false)
            this.$emit('change', 'refresh')
        }
    }
}
</script>
<style scoped lang="scss">
.control-button {
    display: flex;
    justify-content: space-between;
}
</style>